<script setup>
import {ref, onMounted, defineProps, watch} from 'vue';
import Step1 from './step-1.vue';
import Step2 from "./step-2.vue";
import Step3 from "./step-3.vue";
import Step4 from "./step-4.vue";
import {useRouter, useRoute} from 'vue-router';
import {createProduct, getProduct, updateProduct} from '@/api/product';

const route = useRoute();
const router = useRouter();
const active = ref(0);
const showStatus = ref([ true,  false, false, false]);
// 传递所有参数
const defaultProductParam = {
  albumPics: '',
  brandId: null,
  brandName: '',
  deleteStatus: 0,
  description: '',
  detailDesc: '',
  detailHtml: '',
  detailMobileHtml: '',
  detailTitle: '',
  feightTemplateId: 0,
  flashPromotionCount: 0,
  flashPromotionId: 0,
  flashPromotionPrice: 0,
  flashPromotionSort: 0,
  giftPoint: 0,
  giftGrowth: 0,
  keywords: '',
  lowStock: 0,
  name: '',
  newStatus: 0,
  note: '',
  originalPrice: 0,
  pic: '',
  //会员价格{memberLevelId: 0,memberPrice: 0,memberLevelName: null}
  memberPriceList: [],
  //商品满减
  productFullReductionList: [{fullPrice: 0, reducePrice: 0}],
  //商品阶梯价格
  productLadderList: [{count: 0, discount: 0, price: 0}],
  previewStatus: 0,
  price: 0,
  productAttributeCategoryId: null,
  //商品属性相关{productAttributeId: 0, value: ''}
  productAttributeValueList: [],
  //商品sku库存信息{lowStock: 0, pic: '', price: 0, sale: 0, skuCode: '', spData: '', stock: 0}
  skuStockList: [],
  //商品相关专题{subjectId: 0}
  subjectProductRelationList: [],
  //商品相关优选{prefrenceAreaId: 0}
  prefrenceAreaProductRelationList: [],
  productCategoryId: null,
  productCategoryName: '',
  productSn: '',
  promotionEndTime: '',
  promotionPerLimit: 0,
  promotionPrice: null,
  promotionStartTime: '',
  promotionType: 0,
  publishStatus: 0,
  recommandStatus: 0,
  sale: 0,
  serviceIds: '',
  sort: 0,
  stock: 0,
  subTitle: '',
  unit: '',
  usePointLimit: 0,
  verifyStatus: 0,
  weight: 0
};
const productParam = Object.assign({}, defaultProductParam) // 深拷贝默认参数
// 组件通信
const props = defineProps({
  isEdit: {
    type: Boolean,
    default: true
  }
});

// 下一步
const nextStep = () => {
  if (active.value < showStatus.value.length - 1) {
    active.value++;
    hideAll();
    showStatus.value[active.value] = true;
  }
};

// 隐藏所有步骤
const hideAll = () => {
  for (let i = 0; i < showStatus.value.length; i++) {
    showStatus.value[i] = false;
  }
}

// 上一步
const prevStep = () => {
  if (active.value > 0 && active.value < showStatus.value.length) {
    active.value--;
    hideAll();
    showStatus.value[active.value] = true;
  }
  console.log('prevStep');
};

// 保存商品
const saveProduct = () => {
  if (props.isEdit) {
    updateProduct(productParam.value).then(res => {
      console.log('更新商品成功:', res);
      router.push({name: 'productList'});
    }).catch(error => {
      console.error('更新商品失败:', error);
    });
  } else {
    createProduct(productParam.value).then(res => {
      console.log('创建商品成功:', res);
      router.push({name: 'productList'});
    }).catch(error => {
      console.error('创建商品失败:', error);
    });
  }
}

onMounted(() => {
  if (route.query.id) {
    getProduct(route.query.id).then(res => {
      console.log(route.query.id, res.data.data);
      productParam.value = res.data.data;
    }).catch(error => {
      console.error('获取商品详情失败:', error);
    });
  }


  // const res = props.isEdit ? getProduct(router.query.id) : Promise.resolve(defaultProductParam);
  // res.then(res => {
  //   productParam.value = res;
  //   active.value = 0;
  //   showStatus.value[0] = true;
  // }).catch(error => {
  //   console.error('获取商品详情失败:', error);
  // });
});

</script>

<template>
  <el-card style="width: 800px;">
    <el-steps :active="active" finish-status="success" align-center>
      <el-step title="填写商品信息"></el-step>
      <el-step title="填写商品促销"></el-step>
      <el-step title="填写商品属性"></el-step>
      <el-step title="选择商品关联"></el-step>
    </el-steps>

    <Step1
        v-show="showStatus[0]"
        :is-edit="isEdit"
        @nextStep="nextStep"
        :product-param="productParam"/>
    <Step2
        :is-edit="isEdit"
        v-show="showStatus[1]"
        :product-param="productParam"
        @prevStep=" prevStep"
        @nextStep="nextStep"
    />
    <Step3
        :is-edit="isEdit"
        v-show="showStatus[2]"
        :product-param="productParam"
        @prevStep=" prevStep"
        @nextStep="nextStep"
    />
    <Step4
        :is-edit="isEdit"
        v-show="showStatus[3]"
        :product-param="productParam"
        @prevStep=" prevStep"
        @saveProduct="saveProduct"
        />
  </el-card>
</template>

<style scoped>


</style>